<template>
    <img
        class="preview-image"
        v-if="img"
        :src="img"
        alt=""
        :style="{width: width, height: height, cursor: 'pointer'}"
        @click="onClickPreview" />
</template>

<script>
export default {
    name: 'PreviewImage',
    props: {
        image: {
            type: [String, Array],
            default: ''
        },
        width: {
            type: String,
            default: '50px'
        },
        height: {
            type: String,
            default: '50px'
        },
        join: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            data: [],
            img: ''
        }
    },
    watch: {
        image() {
            this.init()
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            if (this.join) {
                if (Array.isArray(this.image)) {
                    this.data = this.image.map(value => `${this.$url}/${value}`)
                    const [img] = this.data
                    this.img = img
                } else if (this.image) {
                    this.img = `${this.$url}/${this.image}`
                    this.data = [this.img]
                }
            } else {
                this.img = this.image
                this.data = [this.img]
            }
        },
        onClickPreview(url) {
            this.$hevueImgPreview({
                multiple: true,
                imgList: this.data,
                clickMaskCLose: true
            })
        }
    }
}
</script>

<style lang="less">
</style>
